
<!--<template>-->
<!--  <div class="content">-->
<!--    <div class="content-title">-->
<!--      <h1>AI Chat</h1>-->
<!--    </div>-->
<!--    <div id="chat-container" class="chat-container">-->
<!--      <div id="chat-messages" class="chat-messages">-->
<!--        <div v-if="messages.length === 0" class="welcome-message">-->
<!--          欢迎！请问有什么我可以帮助你的吗？-->
<!--        </div>-->
<!--        <div v-for="(message, index) in messages" :key="index" class="duihua">-->
<!--          <div v-if="message.user" class="user-duihua">User: {{ message.user }}</div>-->
<!--          <div v-if="message.ai && !message.typing" class="ai-duihua">AI: {{ message.ai }}</div>-->
<!--          <div v-if="message.typing" class="ai-typing">AI is typing...</div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="chat-shuru">-->
<!--        <input type="text" v-model="userInput" @keyup.enter="sendMessage">-->
<!--        <button @click="sendMessage">Send</button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      userInput: '',-->
<!--      messages: []-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    sendMessage() {-->
<!--      if (!this.userInput.trim()) return;-->

<!--      // Display "AI is typing..." immediately-->
<!--      this.messages.push({ user: this.userInput, ai: '', typing: true });-->
<!--      const userMessageIndex = this.messages.length - 1;-->
<!--      this.userInput = '';-->

<!--      fetch('/chat', {-->
<!--        method: 'POST',-->
<!--        headers: {-->
<!--          'Content-Type': 'application/json'-->
<!--        },-->
<!--        body: JSON.stringify({ question: this.messages[userMessageIndex].user })-->
<!--      })-->
<!--          .then(response => {-->
<!--            if (!response.ok) {-->
<!--              throw new Error(`HTTP error! Status: ${response.status}`);-->
<!--            }-->
<!--            return response.json();  // 解析 JSON 响应-->
<!--          })-->
<!--          .then(data => {-->
<!--            // Replace "AI is typing..." with actual AI response-->
<!--            this.messages.splice(userMessageIndex, 1, { user: this.messages[userMessageIndex].user, ai: data.response, typing: false });-->
<!--          })-->
<!--          .catch(error => {-->
<!--            console.error('Error:', error);-->
<!--          });-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.content {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  font-family: 'Arial, sans-serif';-->
<!--  padding: 20px;-->
<!--  margin-left: 10%;-->
<!--  margin-right: 10%;-->
<!--  margin-bottom: 5%;-->
<!--  margin-top: 1%;-->
<!--  background-color: #f9f9f9;-->
<!--  border-radius: 10px;-->
<!--  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);-->
<!--}-->
<!--.content-title h1{-->
<!--  font-family: 'Raleway';-->
<!--  font-weight: 700;-->
<!--  font-size: 36px;-->
<!--  color: #436B7C;-->
<!--  background: none;-->
<!--  line-height: 1.1;-->
<!--  padding: 20px 0 20px;-->
<!--  margin: 0 0 25px 0;-->
<!--  position: relative;-->
<!--  border-bottom: 4px solid #7fa6bd;-->
<!--  align-content: center;-->
<!--}-->
<!--.chat-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  width: 100%;-->
<!--  min-height: 150px;-->
<!--  height: 100%;-->
<!--}-->

<!--.chat-messages {-->
<!--  border-radius: 10px;-->
<!--  padding-top: 2%;-->
<!--  padding-left: 2%;-->
<!--  padding-right: 2%;-->
<!--  background: white;-->
<!--  flex-grow: 1;-->
<!--  overflow-y: auto;-->
<!--  margin-left: 5%;-->
<!--  margin-right: 5%;-->
<!--}-->

<!--.chat-shuru {-->
<!--  display: flex;-->
<!--  padding: 10px;-->
<!--  margin-left: 5%;-->
<!--  margin-right: 5%;-->
<!--}-->

<!--.chat-shuru input {-->
<!--  width: 90%;-->
<!--  flex-grow: 1;-->
<!--  padding: 10px;-->
<!--  border-radius: 5px;-->
<!--  border: 1px solid #ddd;-->
<!--}-->

<!--.chat-shuru button {-->
<!--  width: 9%;-->
<!--  padding: 10px;-->
<!--  border-radius: 5px;-->
<!--  border: none;-->
<!--  background-color: #7fabbe;-->
<!--  color: white;-->
<!--  margin-left: 10px;-->
<!--  cursor: pointer;-->
<!--}-->
<!--.chat-shuru button:hover-->
<!--{-->
<!--  background-color: #b3cdd8;-->
<!--  color: white;-->
<!--}-->

<!--.chat-messages .welcome-message {-->
<!--  text-align: center;-->
<!--  color: #888;-->
<!--  font-size: 18px;-->
<!--  margin-top: 20px;-->
<!--}-->

<!--.chat-messages .duihua {-->
<!--  margin-bottom: 2%;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.chat-messages .duihua .user-duihua {-->
<!--  background-color: #f4f7f9;-->
<!--  font-family: math;-->
<!--  align-self: flex-end;  /* 将用户对话内容对齐到右侧 */-->
<!--  padding: 10px;-->
<!--  border-radius: 10px;-->
<!--  max-width: 70%;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.chat-messages .duihua .ai-duihua {-->
<!--  font-family: math;-->
<!--  align-self: flex-start;  /* 将 AI 对话内容对齐到左侧 */-->
<!--  background-color: #f1f1f1;-->
<!--  padding: 10px;-->
<!--  border-radius: 10px;-->
<!--  max-width: 70%;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.chat-messages .duihua .ai-typing {-->
<!--  align-self: flex-start;  /* 将 AI 正在输入提示对齐到左侧 */-->
<!--  color: #888;-->
<!--  font-style: italic;-->
<!--  margin-bottom: 10px;-->
<!--}-->
<!--</style>-->
<template>
  <div class="content">
    <div class="content-title">
      <h1>AI Chat</h1>
    </div>
    <div id="chat-container" class="chat-container">
      <div id="chat-messages" class="chat-messages" ref="chatMessages">
        <div v-if="messages.length === 0" class="welcome-message">
          欢迎！请问有什么我可以帮助你的吗？
        </div>
        <div v-for="(message, index) in messages" :key="index" class="duihua">
          <div v-if="message.user" class="user-duihua"> {{ message.user }}</div>
          <div v-if="message.ai && !message.typing" class="ai-duihua"> {{ message.ai }}</div>
          <div v-if="message.typing" class="ai-typing">AI is typing...</div>
        </div>
      </div>
      <div class="chat-shuru">
        <div class="input-container">
          <select v-model="selectedMode" class="mode-select">
            <option value="guide">向导</option>
            <option value="food">美食推荐官</option>
            <option value="chatbot">聊天机器人</option>

          </select>
          <input type="text" v-model="userInput" @keyup.enter="sendMessage" placeholder="请输入消息...">
        </div>
        <button @click="sendMessage">Send</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  data() {
    return {
      userInput: '', // 用户输入的内容
      messages: [], // 聊天记录
      selectedMode: 'chatbot' // 默认聊天模式
    };
  },
  methods: {
    async sendMessage() {
      if (!this.userInput.trim()) return; // 检查输入是否为空

      // 添加用户输入到消息列表，并显示 "AI is typing..."
      this.messages.push({ user: this.userInput, ai: '', typing: true });
      const userMessageIndex = this.messages.length - 1; // 获取当前消息索引
      const mode = this.selectedMode; // 当前选定的模式
      this.userInput = ''; // 清空输入框

      // 滚动到底部
      await this.scrollToBottom();

      // 发送请求到后端
      fetch('/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          question: this.messages[userMessageIndex].user,
          mode: mode
        })
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
          }
          return response.json(); // 解析 JSON 响应
        })
        .then((data) => {
          // 替换 "AI is typing..." 为 AI 的实际回复
          this.messages.splice(userMessageIndex, 1, {
            user: this.messages[userMessageIndex].user,
            ai: data.response,
            typing: false
          });

          // 确保滚动到最新消息
          this.scrollToBottom();
        })
        .catch((error) => {
          console.error('Error:', error);
        });
    },
    async scrollToBottom() {
      // 等待 DOM 更新完成后滚动到底部
      await nextTick();
      const chatMessages = this.$refs.chatMessages;
      if (chatMessages) {
        chatMessages.scrollTop = chatMessages.scrollHeight; // 设置滚动条位置到最底部
      }
    }
  }
};
</script>


<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Arial, sans-serif';
  padding: 20px;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 5%;
  margin-top: 1%;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.content-title h1 {
  font-family: 'Raleway';
  font-weight: 700;
  font-size: 36px;
  color: #436B7C;
  line-height: 1.1;
  padding: 20px 0 20px;
  margin: 0 0 25px 0;
  border-bottom: 4px solid #7fa6bd;
}

.chat-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 150px;
  height: 100%;
}

.chat-messages {
  border-radius: 10px;
  padding: 2%;
  background: white;
  flex-grow: 1;
  overflow-y: auto; /* 启用垂直滚动 */
  max-height: 550px; /* 限制最大高度 */
  margin: 5%;
  scroll-behavior: smooth; /* 平滑滚动 */
}

.chat-messages::-webkit-scrollbar {
  width: 8px; /* 自定义滚动条宽度 */
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: #c4c4c4; /* 滚动条颜色 */
  border-radius: 10px;
}

.chat-shuru {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-left: 5%;
  margin-right: 5%;
}

.input-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.mode-select {
  margin-right: 10px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
}

.chat-shuru input {
  width: 90%;
  flex-grow: 1;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.chat-shuru button {
  width: 9%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #7fabbe;
  color: white;
  margin-left: 10px;
  cursor: pointer;
}

.chat-shuru button:hover {
  background-color: #b3cdd8;
  color: white;
}

.chat-messages .welcome-message {
  text-align: center;
  color: #888;
  font-size: 18px;
  margin-top: 20px;
}

.chat-messages .duihua {
  margin-bottom: 2%;
  display: flex;
  flex-direction: column;
}

.chat-messages .duihua .user-duihua {
  background-color: #f4f7f9;
  align-self: flex-end;
  padding: 10px;
  border-radius: 10px;
  max-width: 70%;
  margin-bottom: 10px;
}

.chat-messages .duihua .ai-duihua {
  align-self: flex-start;
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 10px;
  max-width: 70%;
  margin-bottom: 10px;
}

.chat-messages .duihua .ai-typing {
  align-self: flex-start;
  color: #888;
  font-style: italic;
  margin-bottom: 10px;
}

</style>

